.loading {
  text-align: center;
  margin-top: 100px;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 20px;
  background: lightgreen;
}
.dot {
  border-radius: 4px;
  animation: loading 0.5s ease-in-out infinite alternate;
}
.dot1 {
  animation-delay: 0;
}
.dot2 {
  animation-delay: 0.2s;
}
.dot3 {
  animation-delay: 0.4s;
}
.dot4 {
  animation-delay: 0.6s;
}
.dot5 {
  animation-delay: 0.8s;
}

@keyframes loading {
  100% {
    transform: scaleY(1.7);
    background: lightblue;
  }
}